<template>
  <a-spin :spinning="loading">
    <a-tabs :activeKey="tabConfig.tabValue" @change="changeTab">
      <a-tab-pane
        v-for="item in tabConfig.tabsData"
        :key="item.projectId"
        :tab="item.project.name">
      </a-tab-pane>
    </a-tabs>
    <a-row :gutter="[20,20]">
      <a-col
        v-for="item in selectedTabSoft"
        :key="item.id"
        :span="4">
        <!-- @dragstart="dragstart(item.id,$event)"
        @dragend="dragend($event)"
        @drop="drop(item.id,$event)"
        @dragover="dragover($event)"
        draggable="true" -->
        <NavigationList :softItems="item" />
      </a-col>
    </a-row>
  </a-spin>
</template>

<script>

// import { getSoftList } from '@/axios'
import { onMounted, reactive, computed, getCurrentInstance, ref } from 'vue'
import NavigationList from './NavigationList'
export default {
  components: {
    NavigationList
  },
  setup () {
    const { proxy } = getCurrentInstance()
    // eslint-disable-next-line prefer-const
    let loading = ref(false)
    // eslint-disable-next-line prefer-const
    let dataSource = ref([])
    // eslint-disable-next-line prefer-const
    let moveIndex = ref(null)
    // eslint-disable-next-line prefer-const
    let targetIndex = ref(null)
    const tabConfig = reactive({
      tabsData: [],
      tabValue: 'ALL'
    })
    const selectedTabSoft = computed(() => {
      if (tabConfig.tabValue === 'ALL') {
        return dataSource.value
      }
      return dataSource.value.filter(item => item.projectId === tabConfig.tabValue)
    })
    onMounted(async () => {
      loading.value = true
      const { errCode, data } = await proxy.$root.$axios.getSoftList()
      if (errCode * 1 === 0) {
        tabConfig.tabsData = data.filter((item, index, self) => {
          return self.findIndex(el => el.projectId === item.projectId) === index
        })
        // eslint-disable-next-line prefer-const
        let dataList = []
        data.forEach(item => {
          tabConfig.tabsData.forEach((el, index) => {
            if (item.projectId === el.projectId) {
              dataList.push({
                ...item
                // assertPic: index > 3 ? index + 1 : index % 4 + 1
              })
            }
          })
        })
        dataSource.value = dataList
        tabConfig.tabsData.unshift({
          projectId: 'ALL',
          project: {
            name: '全部项目'
          }
        })
      }
      loading.value = false
    })
    const changeTab = (activeKey) => {
      tabConfig.tabValue = activeKey
    }
    const dragstart = (id) => {
      moveIndex.value = dataSource.value.findIndex(item => item.id === id)
    }
    const dragover = (event) => {
      event.preventDefault()
    }
    const dragend = (event) => {
      console.log('拖放结束', event.currentTarget)
    }
    const drop = (id, event) => {
      // 阻止默认行为
      event.preventDefault()
      // 阻止默认行为
      event.stopPropagation()
      targetIndex.value = dataSource.value.findIndex(item => item.id === id)
      // 将拖动元素位置index换成目标元素的index
      const temp = dataSource.value[moveIndex.value]

      dataSource.value[moveIndex.value] = dataSource.value[targetIndex.value]
      dataSource.value[targetIndex.value] = temp
    }
    const allowDrop = (event) => {
      event.preventDefault()
    }
    return {
      loading,
      dataSource,
      tabConfig,
      selectedTabSoft,
      changeTab,

      dragstart,
      dragover,
      dragend,
      drop,
      allowDrop
    }
  }
}
</script>

<style lang='less' scoped>
// .navcard-enter-active,
// .navcard-leave-active {
//   transition: all 0.2s ease;
// }
// .navcard-enter-from,
// .navcard-leave-to {
//   opacity: 0;
//   transform: translateY(30px);
// }
</style>
